<template>
	<view class="fond-good-box flex f-d-c">
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				找车标题
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="title" placeholder="请输入发布标题" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				称呼
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="name" placeholder="请输入您的称呼" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				联系电话
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="number" v-model="mobile" maxlength="11" placeholder="请输入您的联系电话" placeholder-class="color-999"/>
				</view>
			</view>
		</view>
		<view class="form-item flex a-i-c j-c-b" @click="getChooseLocation('start')">
			<view class="left color-333 f-s-24">
				起始地
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" :disabled="true" v-model="star_location" placeholder="请输入起始地" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b" @click="getChooseLocation('end')">
			<view class="left color-333 f-s-24">
				目的地
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" :disabled="true" v-model="end_location" placeholder="请输入目的地" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<uni-datetime-picker type="datetime" @change="changeDateTime">
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				出发时间
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" :disabled="true" type="text" v-model="send_time" placeholder="请选择出发时间" placeholder-class="color-999"/>
					<image class="form-next-icon" src="@/static/images/form-next.svg" mode=""></image>
				</view>
			</view> 
		</view>
		</uni-datetime-picker>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				货物名称
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="car_title" placeholder="请输入货物名称" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				重量
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="digit" v-model="weight" placeholder="请输入重量 单位：吨" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				货物详情
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="content" placeholder="请描述您的货物详情" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				最低价格
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="digit" v-model="first_price" placeholder="请选择您的价格区间" placeholder-class="color-999"/>
					<image class="form-next-icon" src="@/static/images/form-next.svg" mode=""></image>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				最高价格
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="digit" v-model="last_price" placeholder="请选择您的价格区间" placeholder-class="color-999"/>
					<image class="form-next-icon" src="@/static/images/form-next.svg" mode=""></image>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				备注
			</view>
			<view class="right">
				<view class="box1 w-100 flex a-i-c j-c-b">
					<input class="f-s-24 input" type="text" v-model="remark" placeholder="请输入您的备注" placeholder-class="color-999"/>
				</view>
			</view> 
		</view>
		<view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				上传货物照片
			</view>
			<view class="right"></view> 
		</view>
		<view class="upload-form flex f-w-w">
			<block v-for="(item, index) in images" :key="index">
				<upload-box :current="index" :src="item" @del="delImage" @success="uploadSuccess"></upload-box>
			</block>
			<upload-box current="" src="" @success="uploadSuccess"></upload-box>
		</view><view class="form-item flex a-i-c j-c-b">
			<view class="left color-333 f-s-24">
				上传证件照片
			</view>
			<view class="right"></view> 
		</view>
		<view class="upload-form flex f-w-w">
			<view class="flex a-i-c j-c-b w-100">
				<view class="upload-image all-center f-d-c" @click="uploadImage('card1')">
					<block v-if="credential_images[0].length<=0">
						<image class="icon" src="@/static/images/my/cmber-d3d3d3.svg" mode=""></image>
						<view class="color-959595 f-s-22">
							上传身份证正面
						</view>
					</block>
					<block v-else>
						<image style="width: 100%;height: 100%;" :src="credential_images[0]" mode=""></image>
					</block>
				</view>
				<view class="upload-image all-center f-d-c" @click="uploadImage('card2')">
					<block v-if="credential_images[1].length<=0">
						<image class="icon" src="@/static/images/my/cmber-d3d3d3.svg" mode=""></image>
						<view class="color-959595 f-s-22">
							上传身份证反面
						</view>
					</block>
					<block v-else>
						<image style="width: 100%;height: 100%;" :src="credential_images[1]" mode=""></image>
					</block>
				</view>
			</view>
		</view>
		<bottom-btn :positon="false" btnType="2" @click="requestData">确认发布</bottom-btn>
	</view>
</template>

<script>
	import uploadBox from "@/components/myComponents/uploadBox.vue"
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	import {reditTo} from "@/nav.js"
	export default {
		name:"findGood",
		components:{
			"upload-box":uploadBox,
			"bottom-btn":bottomBtn
		},
		data() {
			return {
				name:"",
				mobile:"",
				star_location:"",
				end_location:"",
				send_time:"",
				car_title:"",
				car_info:"",
				price:"",
				weight:"",
				content:"",
				first_lng:0,
				first_lat:0,
				last_lng:0,
				last_lat:0,
				title:"",
				remark:"",
				images:[],
				lng:0,
				lat:0,
				first_price:"",
				last_price:"",
				is_post:"",
				credential_images:["",""]
			};
		},
		mounted() {
			this.getLocationThis()
			this.setPageData()
		},
		methods:{
			uploadImage(type){
				let that = this
				that.util.uploadFile().then(res=>{
					switch(type){
						case "card1":
							that.credential_images[0] = res.data.fullurl
							break;
						case "card2":
							that.credential_images[1] = res.data.fullurl
							break;
					}
				})
			},
			setPageData(){
				let str = this.$store.state.page_tab_info
				let item = {}
				if(!!str){
					item = JSON.parse(str)
					console.log(item)
					this.id = item.id
					this.images = item.images
					this.content = item.content
				}
			},
			delImage(e){
				this.images.splice(e,1)
			},
			changeDateTime(e){
				console.log(e)
				this.send_time = e
			},
			getLocationThis(){
				let that = this
				uni.showLoading({
					title:"定位中..."
				})
				that.$location.myGetLocation((res)=>{
					uni.hideLoading()
					that.lng = res.lng
					that.lat = res.lat
				},false)
			},
			getChooseLocation(type){
				let that = this
				that.$location.myGetLocation(res=>{
					console.log(res)
					if(type === 'start'){
						that.first_lng = res.longitude
						that.first_lat = res.latitude
						that.star_location = res.address
					}else{
						that.last_lng = res.longitude
						that.last_lat = res.latitude
						that.end_location = res.address
					}
				})
			},
			requestData(){
				if(this.title === ""){
					uni.showToast({
						title:"请输入标题",
						icon:"none"
					})
					return
				}
				if(this.name === ""){
					uni.showToast({
						title:"请输入姓名",
						icon:"none"
					})
					return
				}
				if(this.mobile === "" && this.mobile.length !== 11){
					uni.showToast({
						title:"输入手机号码不正确",
						icon:"none"
					})
					return
				}
				if(this.star_location === ""){
					uni.showToast({
						title:"请选择起始地",
						icon:"none"
					})
					return
				}
				if(this.end_location === ""){
					uni.showToast({
						title:"请选择目的地",
						icon:"none"
					})
					return
				}
				if(this.send_time === ""){
					uni.showToast({
						title:"请选择出发时间",
						icon:"none"
					})
					return
				}
				if(this.car_title === ""){
					uni.showToast({
						title:"请输入货物名称",
						icon:"none"
					})
					return
				}
				if(this.weight === ""){
					uni.showToast({
						title:"请输入货物重量",
						icon:"none"
					})
					return
				}
				if(this.last_price === "" || this.first_price === ''){
					uni.showToast({
						title:"请输入货物价格区间",
						icon:"none"
					})
					return
				}
				
				if(this.images.length<=0){
					uni.showToast({
						title:"请上传车辆照片",
						icon:"none"
					})
					return
				}
				this.postSellingCar()
			},
			postSellingCar(){
				let that = this
				// return
				if(that.is_post !== ''){
					return
				}
				uni.showLoading({
					title:"提交中..."
				})
				that.is_post = '1'
				that.util.postRequest({
					url:"v1/content/transport_edit",
					data:{
						name:that.name,
						mobile:that.mobile,
						images:that.images,
						lng:that.lng,
						lat:that.lat,
						type:1,
						first_lng:that.first_lng,
						first_lat:that.first_lat,
						first_address_desc:that.star_location,
						last_lng:that.last_lng,
						last_lat:that.last_lat,
						last_address_desc:that.end_location,
						send_time:that.send_time,
						content:that.content,
						weight:that.weight,
						first_price:that.first_price,
						last_price:that.last_price,
						remark:that.remark,
						images:that.images,
						lng:that.lng,
						lat:that.lat,
						credential_images:that.credential_images,
						age:"",
						title:that.title
					}
				}).then(res=>{
					uni.hideLoading()
					console.log(res)
					that.is_post=""
					// reditTo({url:'/pages/success/successPage'})
					uni.showToast({
						title:"待审核",
						duration:2500
					})
					// let timeout = setTimeout(()=>{
					// 	clearTimeout(timeout)
					// 	uni.navigateBack()
					// },2500)
				}).catch(e=>{
					uni.hideLoading()
				})
			},
			uploadSuccess(e){
				let {index,url} = e
				if(index === ''){
					this.images.push(url)
				}else{
					this.images.splice(index,1,url)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.upload-image{
		width: 338upx;
		height: 194upx;
		border-radius: 16upx;
		background: #fafafa;
		.icon{
			width: 60upx;
			height: 60upx;
			margin-bottom: 26upx;
		}
	}
	.fond-good-box{
		width: 100%;
		border-radius: 20upx;
		background-color: #FFFFFF;
		padding: 30upx;
		.upload-form{}
		.form-item{
			width: 100%;
			padding: 0 16upx;
			min-height: 80upx;
			.right{
				width: 430upx;
				.box1{
					.input{
						width: 380upx;
					}
				}
				.box2{
					.title{
						margin-bottom: 26upx;
						line-height: 50upx;
					}
				}
			}
			.left{
				line-height: 50upx;
			}
		}
	}
	.form-next-icon{
		width: 26upx;
		height: 26upx;
	}
	
</style>